<template>
  <GlobalPage>
      <div class="meter-box flex">
        <!-- 用户数据看板 -->
        <div class="user-meter-box flex unified-flex-space-between">
          <div class="user-header">
            <p>用户数据 / 本周</p>
            <p class="header-tips">Support Requests</p>
            <p class="header-illustrate">
              Total number of support requests that come in.
            </p>
          </div>

          <div ref="user-meter" class="user-meter"></div>

          <div
            class="user-record flex unified-flex-space-between unified-flex-align"
          >
            <div
              class="order-record-item flex unified-flex-align unified-flex-center"
            >
              <p class="order-record-main">10</p>
              <p class="order-record-chara">昨日</p>
            </div>
            <div
              class="order-record-item flex unified-flex-align unified-flex-center"
            >
              <p class="order-record-main">10</p>
              <p class="order-record-chara">今日</p>
            </div>
            <div
              class="order-record-item flex unified-flex-align unified-flex-center"
            >
              <p class="order-record-main">10</p>
              <p class="order-record-chara">本周</p>
            </div>
          </div>
        </div>

        <!-- 订单数据看板 -->
        <div class="order-meter-box flex unified-flex-space-between">
          <div class="order-header">
            <p>订单数据 / 本周</p>
            <p class="header-tips">Support Requests</p>
            <p class="header-illustrate">
              Total number of support requests that come in.
            </p>
          </div>
          <div ref="order-meter" class="order-meter"></div>
          <div
            class="order-record flex unified-flex-space-between unified-flex-align"
          >
            <div
              class="order-record-item flex unified-flex-align unified-flex-center"
            >
              <p class="order-record-main">10</p>
              <p class="order-record-chara">昨日</p>
            </div>
            <div
              class="order-record-item flex unified-flex-align unified-flex-center"
            >
              <p class="order-record-main">10</p>
              <p class="order-record-chara">今日</p>
            </div>
            <div
              class="order-record-item flex unified-flex-align unified-flex-center"
            >
              <p class="order-record-main">10</p>
              <p class="order-record-chara">本周</p>
            </div>
          </div>
        </div>

        <div class="trace-meter-box flex unified-flex-space-between">
          <div class="trace-meter-item flex unified-flex-space-between">
            <div class="header">
              <p>0</p>
              <p class="header-tips">昨日订单总额</p>
              <i class="el-icon-edit icon"></i>
            </div>
            <div
              class="record flex unified-flex-space-between unified-flex-align"
            >
              <p></p>
            </div>
          </div>
          <div class="trace-meter-item flex unified-flex-space-between">
            <div class="header">
              <p>0</p>
              <p class="header-tips">今日订单总额</p>
              <i class="el-icon-edit icon"></i>
            </div>
            <div
              class="record flex unified-flex-space-between unified-flex-align"
            >
              <p></p>
            </div>
          </div>
          <div class="trace-meter-item flex unified-flex-space-between">
            <div class="header">
              <p>0</p>
              <p class="header-tips">昨日登录人次</p>
              <i class="el-icon-edit icon"></i>
            </div>
            <div
              class="record flex unified-flex-space-between unified-flex-align"
            >
              <p></p>
            </div>
          </div>
          <div class="trace-meter-item flex unified-flex-space-between">
            <div class="header">
              <p>0</p>
              <p class="header-tips">今日登录人次</p>
              <i class="el-icon-edit icon"></i>
            </div>
            <div
              class="record flex unified-flex-space-between unified-flex-align"
            >
              <p></p>
            </div>
          </div>
          <div class="trace-meter-item flex unified-flex-space-between">
            <div class="header">
              <p>0</p>
              <p class="header-tips">今日登录人次</p>
              <i class="el-icon-edit icon"></i>
            </div>
            <div
              class="record flex unified-flex-space-between unified-flex-align"
            >
              <p></p>
            </div>
          </div>
          <div class="trace-meter-item flex unified-flex-space-between">
            <div class="header">
              <p>0</p>
              <p class="header-tips">今日登录人次</p>
              <i class="el-icon-edit icon"></i>
            </div>
            <div
              class="record flex unified-flex-space-between unified-flex-align"
            >
              <p></p>
            </div>
          </div>
        </div>
      </div>

      <div class="map">
        <chunkTitle title="测试组件块" icon="el-icon-eleme">
          <div
            class="change-select flex unified-flex-align unified-flex-center"
          >
            <el-radio-group v-model="radio1">
              <el-radio-button label="性别"></el-radio-button>
              <el-radio-button label="地区"></el-radio-button>
            </el-radio-group>
          </div>
        </chunkTitle>

        <div class="user-map"></div>
      </div>
  </GlobalPage>
</template>

<script setup>
import GlobalPage from "@/components/Global-Page/Global-Page.vue";
</script>

<style scoped="scoped">
.page {
  padding-top: 6px;
}

.meter-box {
  width: 100%;
  height: 180px;
}

.map,
.trace-meter-item,
.user-meter-box,
.order-meter-box {
  border-radius: 4px;
  box-shadow: 0px 0px 3px 4px #c3c3c324;
  overflow: hidden;
}

.map {
  margin-bottom: 15px;
}

.user-meter-box,
.order-meter-box {
  margin-right: 30px;
  width: 340px;
  height: 100%;
  flex-direction: column;
  background-color: #fff;
}

.header,
.user-header {
  width: 100%;
  height: 90px;
  padding-top: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  font-family: "微软雅黑";
  font-size: 20px;
}

.header-tips {
  font-size: 10px;
  margin-top: 4px;
  color: #82939c88;
}

.header-illustrate {
  font-size: 10px;
  margin-top: 15px;
  text-align: center;
  text-indent: -20px;
  display: none;
}

.user-meter,
.order-meter {
  width: 100%;
  flex: 1;
  background-color: #fff;
}

.record,
.user-record,
.order-record {
  width: 100%;
  height: 70px;
  margin-top: 30px;
  color: gray;
  /* background-color: #2269f3; */
}

.user-record {
  background-color: #f74f0e;
}

.order-record-item {
  flex: 1;
  height: 100%;
  flex-direction: column;
  color: #fff;
}

.order-record-main {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 0px;
}
.order-record-chara {
  font-size: 10px;
}
.trace-meter-box {
  flex: 1;
  height: 100%;
  flex-wrap: wrap;
  align-content: space-between;
}
.trace-meter-item {
  width: 30%;
  height: 45%;
  background-color: #fff;
  flex-direction: column;
  position: relative;
  & .record {
    margin-top: 0px;
    height: 40px;
  }

  & .header {
    height: 60px;
    color: #f74f0e;
  }

  & .icon {
    position: absolute;
    right: 20px;
    top: 28px;
    color: #2c3e50;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f74f0e;
    color: #fff;
    text-align: center;
    line-height: 30px;
    font-size: 10px;
  }
}

.map {
  width: 100%;
  height: 600px;
  margin-top: 20px;
  background-color: #fff;
  position: relative;
}

.change-select {
  width: 140px;
}

.user-map {
  background-color: blue;
  width: 100%;
  height: 600px;
}
</style>
